<template>
  <div>
    <a-card :bordered="false">
      <a-row style="background-color: rgb(255,255,255)">
        <a-col>
          <h3 style="margin-top: 28px;margin-left: 24px;font-size: 28px">{{ basePacking.batchName }}</h3>
        </a-col>
      </a-row>
      <a-row :gutter="24" style="background-color: rgb(255,255,255);padding-bottom: 10px;">
        <div style="margin-left: 24px;">
          <a-col :span="6">
            <p>采购项目名称：{{ basePacking.departName }}</p>
          </a-col>
          <a-col :span="6">
            <p>收货地址：{{ basePacking.address }}</p>
          </a-col>

          <a-col :span="6">
            <p>收货人：{{ basePacking.consignee }}</p>
          </a-col>

          <a-col :span="6">
            <p>收货电话：{{ basePacking.phone }}</p>
          </a-col>

          <a-col :span="6">
            <p>采购项备注：{{ basePacking.remark }}</p>
          </a-col>
        </div>
        <div style="float:right;margin-right: 28px">
          <span style="font-size:18px">批次人数：<span style="font-size:24px">{{ basePacking.personnum }}</span></span>
          <a-button v-if="$route.query.check=='true'"
                    @click="$router.push({path:'/orderCenter/saveBox',query:{batch:basePacking.id,order:$route.query.order}})"
                    style="display: inline;margin-left:8px" type="primary">
            新增装箱
          </a-button>
        </div>
      </a-row>

      <!--遍历表单-->
      <!--table区域-begin-->
      <div style="margin-bottom: 10px;" v-for="(item,key) in packageList" :key="item.id">
        <h3 style="font-size: 18px;left: 10px">{{ item.packingName }}</h3>
        <p>备注信息：<span>{{ item.remark }}</span></p>
        <a-button
          v-if="$route.query.check=='true'"
          @click="$router.push({path:'/orderCenter/addPerson',query:{batch:basePacking.id,order:$route.query.order,box:item.id}})"
          style="display: inline;margin-left:8px;left: 10px" type="primary">
          添加人员
        </a-button>

        <a-popconfirm v-if="$route.query.check=='true' && item.listPerson.length==0"
                      style="display: inline;margin-left:8px;left: 10px"
                      title="确定删除吗?"
                      @confirm="() => deleteBoxFunc(item.id)">
          <a-button type="primary">
            删除装箱单
          </a-button>
        </a-popconfirm>

        <a-button
          v-if="true"
          :href="exportFabric+'?id='+item.id" icon="export"
          style="margin-left:8px;left: 10px;" type="primary">
          导出
        </a-button>


        <a-table
          style="margin-top: 10px"
          size="middle"
          :columns="columns"
          :dataSource="item.listPerson"
          class="j-table-force-nowrap"
          :pagination="false">
          <span slot="action" slot-scope="text, record">
          <a-menu-item v-show="$route.query.check=='true'">
              <a-popconfirm style="margin-left: 8px;" title="确定删除吗?"
                            @confirm="() => delBoxProFunc(record.id)">
                    <a style="color:deepskyblue">删除</a>
              </a-popconfirm>
          </a-menu-item>
        </span>
        </a-table>
        <div style="height:20px;width:100%"></div>
      </div>
      <!--表单结束-->
    </a-card>
  </div>
</template>

<script>
// import {mixinDevice} from '@/utils/mixin'
// import {JeecgListMixin} from '@/mixins/JeecgListMixin'
import AreaChartTy from '@/components/chart/AreaChartTy'
import HeadInfo from '@/components/tools/HeadInfo.vue'
import Pie from '@/components/chart/Pie'
import LineChartMultid from '@/components/chart/LineChartMultid'
import {getAction} from "../../api/manage";

export default {
  // mixins: [JeecgListMixin, mixinDevice],
  components: {
    AreaChartTy,
    HeadInfo,
    Pie,
    LineChartMultid
  },
  data() {
    return {
      basePacking: {}, // 批次基本信息
      packageList: [], // 装箱单列表，内含人员列表
      url: {
        list: '/null',
        basePackingDetail: '/orderCenter/basePackingDetail', // 批次基本信息
        listPackage: '/orderCenter/listPackage', // 批次下的装箱单列表，内涵人员列表
        delBoxPro: '/orderCenter/delBoxPro', // 装箱单下的人员删除
        deleteBox: '/orderCenter/deleteBox', // 删除装箱单
        getboxPersonFile: 'orderCenter/getboxPersonFile', // 导出装箱单下的人员
      },
      // 表头
      columns: [
        {
          title: '序号',
          dataIndex: '',
          key: 'rowIndex',
          width: 60,
          align: 'center',
          customRender: function (t, r, index) {
            return parseInt(index) + 1
          }
        },
        {
          title: '员工姓名',
          align: "center",
          dataIndex: 'customerName'
        },
        {
          title: '员工工号',
          align: "center",
          dataIndex: 'customerCode'
          /* customRender: (text) => {
             //字典值替换通用方法
             return filterDictTextByCache('sex', text);
           }*/
        },
        {
          title: '性别',
          align: "center",
          dataIndex: 'sex',
          customRender: function (text) {
            if (text == '1') {
              return '男'
            } else {
              return '女'
            }
          }
        },
        {
          title: '收货地址',
          align: "center",
          dataIndex: 'address'
        },
        {
          title: '产品名称',
          align: "center",
          dataIndex: 'productName'
        },
        {
          title: '小产品编号',
          align: "center",
          dataIndex: 'code'
        },
        {
          title: '操作',
          dataIndex: 'action',
          align: 'center',
          // fixed:"right",
          width: 147,
          scopedSlots: {customRender: 'action'}
        }
      ],
    }
  },
  computed: {
    exportFabric: function () {
      return `${window._CONFIG['domianURL']}/${this.url.getboxPersonFile}`
    }
  },
  created() {
    this.getbasePackingDetailFunc()
    this.getPackingListFunc()
  },
  methods: {

    /**
     * 删除装箱单
     * @param id 装箱单id
     */
    deleteBoxFunc(id) {
      getAction(this.url.deleteBox, {
        'boxid': id
      }).then(res => {
        if (res.code == '200') {
          this.getPackingListFunc()
          this.getbasePackingDetailFunc()
          this.$message.success("删除成功")
        } else {
          this.$message.error("删除失败")
        }
      })
    },

    /**
     * 获取批次基本信息
     */
    getbasePackingDetailFunc() {
      getAction(this.url.basePackingDetail, {
        'packingID': this.$route.query.packing
      }).then(res => {
        if (res.code == '0') {
          this.basePacking = res.data
        }
      })
    },

    /**
     * 获取装箱单列表，内含人员列表
     */
    getPackingListFunc() {
      getAction(this.url.listPackage, {
        'packingID': this.$route.query.packing
      }).then(res => {
        if (res.code == '0') {
          this.packageList = res.data
        }
      })
    },

    /**
     * 装箱单下人员删除
     * @param id 装箱单人员关系表ID
     */
    delBoxProFunc(id) {
      getAction(this.url.delBoxPro, {
        'id': id
      }).then(res => {
        if (res.code == '0') {
          this.$message.success("删除成功")
          this.getPackingListFunc()
        } else {
          this.$message.error("删除失败")
        }
      })
    }
  }
}
</script>

<style lang="less" scoped>
.circle-cust {
  position: relative;
  top: 28px;
  left: -100%;
}

.extra-wrapper {
  line-height: 55px;
  padding-right: 24px;

  .extra-item {
    display: inline-block;
    margin-right: 24px;

    a {
      margin-left: 24px;
    }
  }
}

/* 首页访问量统计 */
.head-info {
  position: relative;
  text-align: center;
  //padding: 0 32px 0 0;
  min-width: 125px;
  padding-top: 20px;
  padding-left: 20px;

  span {
    color: rgba(0, 0, 0, .45);
    display: inline-block;
    font-size: .95rem;
    line-height: 42px;
    margin-bottom: 4px;
  }

  p {
    line-height: 42px;
    margin: 0;

    a {
      font-weight: 600;
      font-size: 1rem;
    }
  }
}

.element.style {
  width: 48%;
  height: 420px;
  cursor: default;
}

.extra-wrapper {
  line-height: 55px;
  padding-right: 24px;

  .extra-item {
    display: inline-block;
    margin-right: 24px;

    a {
      margin-left: 24px;
    }
  }
}

.statistic {
  padding: 0px !important;
}

.statistic h4 {
  margin-bottom: 20px;
  text-align: center !important;
  font-size: 24px !important;;
}

.statistic #canvas_1 {
  width: 100% !important;
}
</style>
